<template>
  <div>
    <el-form
      ref="form"
      size="small"
      :model="form"
      label-position="top"
      label-width="100px"
      :rules="rules"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="序号：" prop="indexNum">
            <el-input-number
              v-model="form.indexNum"
              controls-position="right"
              :min="1"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="名称：" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="关联大屏：" prop="reportId">
            <el-select
              v-model="form.reportId"
              placeholder="请选择关联大屏"
              @change="reportChange"
            >
              <el-option
                v-for="item in fineReportList"
                :key="item.id"
                :label="item.reportName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-row v-for="(item, index) in form.paramList" :key="index">
            <el-form-item
              :label="`参数${index + 1}:`"
              :required="form.paramList && form.paramList.length > 0"
            >
              <el-col :span="6">
                <el-form-item>
                  <el-input v-model="item.param" clearable disabled> </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  :prop="'paramList.' + index + '.type'"
                  :rules="rules.type"
                >
                  <el-select
                    v-model="item.type"
                    placeholder="选择参数类型"
                    @change="(val) => typeChange(val, item)"
                  >
                    <el-option label="年" value="1"></el-option>
                    <el-option label="月" value="2"></el-option>
                    <el-option label="单位编码" value="3"></el-option>
                    <el-option label="文本" value="4"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  :prop="'paramList.' + index + '.dateType'"
                  :rules="rules.dateType"
                  v-if="item.type === '2'"
                >
                  <el-select
                    v-model="item.dateType"
                    placeholder="选择日期格式"
                    @change="(val) => dateTypeChange(val, item)"
                  >
                    <el-option label="YYYYMM" value="1"></el-option>
                    <el-option label="YYYY-MM" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  :prop="'paramList.' + index + '.value'"
                  :rules="rules.value"
                  v-if="item.type === '1' || item.type === '2'"
                >
                  <el-date-picker
                    :type="item.type === '2' ? 'month' : 'year'"
                    v-model="item.value"
                    :format="
                      item.type === '2' && item.dateType === '1'
                        ? 'yyyyMM'
                        : item.type === '2' && item.dateType === '2'
                        ? 'yyyy-MM'
                        : 'yyyy'
                    "
                    :value-format="
                      item.type === '2' && item.dateType === '1'
                        ? 'yyyyMM'
                        : item.type === '2' && item.dateType === '2'
                        ? 'yyyy-MM'
                        : 'yyyy'
                    "
                    :placeholder="item.type === '2' ? '选择月' : '选择年'"
                    @change="dateChange"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item
                  :prop="'paramList.' + index + '.value'"
                  :rules="rules.value"
                  v-if="item.type === '3'"
                >
                  <el-input v-model="item.value" disabled></el-input>
                </el-form-item>
                <el-form-item
                  :prop="'paramList.' + index + '.value'"
                  :rules="rules.value"
                  v-if="item.type === '4'"
                >
                  <el-input
                    placeholder="请输入参数值"
                    v-model="item.value"
                    @change="valueChange"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-row>
        </el-col>
        <el-col :span="12" style="margin-top: 36px">
          <slot></slot>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { selectReportManage } from '@/apis/meetingConfiguration'
import { findOrgMappedBylogin } from '@/apis/Common'

export default {
  props: {
    index: {
      type: Number,
      default: 1
    },
    list: {
      type: Object,
      default: () => {
        return { contentLists: [{}] }
      }
    }
  },
  data() {
    return {
      form: {
        indexNum: this.index,
        ...this.list
      },
      fineReportList: [],
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        indexNum: [{ required: true, message: '请输入序号', trigger: 'blur' }],
        reportId: [
          {
            required: true,
            message: '请选择关联大屏',
            trigger: 'change'
          }
        ],
        dateType: [
          {
            required: true,
            message: '请选择日期格式',
            trigger: 'change'
          }
        ],
        type: [
          {
            required: true,
            message: '请选择参数类型',
            trigger: 'change'
          }
        ],
        value: [
          {
            required: true,
            message: '请选择/输入参数值',
            trigger: ['change', 'blur']
          }
        ]
      }
    }
  },
  watch: {
    form: {
      handler: function (n, o) {
        this.$emit('onChange', n)
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    this.form.param
      ? this.$set(this.form, 'paramList', JSON.parse(this.form.param))
      : (this.form.paramList = [])

    this.getReportList()
  },
  methods: {
    getReportList() {
      selectReportManage().then((res) => {
        if (res.code === 200) {
          this.fineReportList = res.data
        }
      })
    },
    reportChange(val) {
      this.fineReportList.map((item) => {
        if (item.id === val) {
          this.form.url = item.url
          this.form.paramList = []
          item.param?.length > 0
            ? item.param.split(',').map((it) => {
                this.form.paramList.push({
                  param: it,
                  type: '',
                  value: '',
                  dateType: ''
                })
              })
            : (this.form.paramList = [])
        }
      })
    },
    async typeChange(val, item) {
      item.dateType = ''
      item.value = ''
      if (val === '3') {
        let res = await findOrgMappedBylogin()
        if (res.code === 200) {
          item.value = res.data.orgCode
        }
      }
      this.$set(this.form, 'param', JSON.stringify(this.form.paramList))
    },
    dateTypeChange(val, item) {
      if (item.value?.length > 0) {
        item.value = ''
      }
      this.$set(this.form, 'param', JSON.stringify(this.form.paramList))
    },
    valueChange(val) {
      this.$set(this.form, 'param', JSON.stringify(this.form.paramList))
    },
    dateChange(val) {
      this.$set(this.form, 'param', JSON.stringify(this.form.paramList))
    }
  }
}
</script>

<style lang="less" scoped></style>
